<!--  -->
<template>
  <div class="container">
    <navbar
      class="de-navbar"
      :vaniconL="true"
      :noRight="true"
      :noLeft="false"
      :vaniconR="true"
      iconNameL="arrow-left"
      iconNameR="setting-o"
      @clickLeft="goBack"
      >咨询列表</navbar
    >
    <div style="height: 0.45rem"></div>
    <!-- swipeable -->
    <van-tabs
      animated
      color="#1989fa"
      sticky
      v-model="active"
      @click="onClick"
      @change="onChange"
    >
      <van-tab title="全部咨询">
        <van-divider class="line"
          >(下拉刷新，建议在WIFI环境下调阅以节省流量)</van-divider
        >
        <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
          <div class="list" v-if="userList && userList.length > 0">
            <div class="child" v-for="(item, index) in userList" :key="index">
              <div class="left" @click="toImgDetail(item)">
                <p class="num">{{ index + 1 }}</p>
                <div class="date">
                  <p>
                    用户姓名:
                    <span style="margin-left: 0.12rem">{{
                      item.patientName
                    }}</span>
                  </p>
                  <p>
                    订单日期:
                    <span style="margin-left: 0.12rem">{{
                      item.orderTime
                    }}</span>
                  </p>
                  <p>
                    咨询医生：
                    <span>{{ item.doctorName }}</span>
                  </p>
                  <p>
                    咨询状态：
                    <span>{{
                      item.orderStatus == 1
                        ? "等待医生确认"
                        : item.orderStatus == 2
                        ? "医生正在查阅中"
                        : item.orderStatus == 3
                        ? "医生已取消"
                        : item.orderStatus == 4
                        ? "医生查阅完成"
                        : item.orderStatus == 5
                        ? "待评价"
                        : item.orderStatus == 6
                        ? "已评价"
                        : item.orderStatus == 7
                        ? "用户已取消"
                        : ""
                    }}</span>
                  </p>
                </div>
              </div>
              <div class="btn-group">
                <van-button
                  plain
                  type="info"
                  color="#4775d9"
                  @click.stop="toImgDetail(item)"
                  size="small"
                  >影像详情</van-button
                >
                <van-badge :content="item.messageStatus == 1 ? '1' : null">
                  <van-button
                    v-show="item.orderStatus == 4 || item.orderStatus == 6"
                    plain
                    type="primary"
                    @click.stop="toReport(item)"
                    size="small"
                    >查看报告</van-button
                  >
                </van-badge>
                <van-button
                  v-show="item.orderStatus == 4"
                  plain
                  type="warning"
                  size="small"
                  @click.stop="toEvaluate(item)"
                  >进行评价</van-button
                >
                <van-button
                  v-show="item.orderStatus == 3"
                  plain
                  color="#e900f7"
                  type="warning"
                  size="small"
                  @click.stop="reasonClick(item)"
                  >取消原因</van-button
                >
                <van-button
                  v-show="item.orderStatus == 1"
                  plain
                  color="red"
                  size="small"
                  @click.stop="cancelClick(item)"
                  >取消咨询</van-button
                >
              </div>
            </div>
          </div>
          <div class="null-box" v-else>
            <img src="@/assets/images/null.png" alt="" />
            <p>空空如也</p>
          </div>
        </van-pull-refresh>
      </van-tab>
      <van-tab title="等待确认"
        ><van-divider class="line"
          >(下拉刷新，建议在WIFI环境下调阅以节省流量)</van-divider
        >
        <van-pull-refresh v-model="isLoading1" @refresh="onRefresh1">
          <div class="list" v-if="todoList && todoList.length > 0">
            <div class="child" v-for="(item, index) in todoList" :key="index">
              <div class="left" @click="toImgDetail(item)">
                <p class="num">{{ index + 1 }}</p>
                <div class="date">
                  <p>
                    用户姓名:
                    <span style="margin-left: 0.12rem">{{
                      item.patientName
                    }}</span>
                  </p>
                  <p>
                    订单日期:
                    <span style="margin-left: 0.12rem">{{
                      item.orderTime
                    }}</span>
                  </p>
                  <p>
                    咨询医生：
                    <span>{{ item.doctorName }}</span>
                  </p>
                  <p>
                    咨询状态：
                    <span>{{
                      item.orderStatus == 1
                        ? "等待医生确认"
                        : item.orderStatus == 2
                        ? "医生正在查阅中"
                        : item.orderStatus == 3
                        ? "医生已取消"
                        : item.orderStatus == 4
                        ? "医生查阅完成"
                        : item.orderStatus == 5
                        ? "待评价"
                        : item.orderStatus == 6
                        ? "已评价"
                        : item.orderStatus == 7
                        ? "用户已取消"
                        : ""
                    }}</span>
                  </p>
                </div>
              </div>
              <div class="btn-group">
                <van-button
                  plain
                  type="info"
                  @click.stop="toImgDetail(item)"
                  color="#4775d9"
                  size="small"
                  >影像详情</van-button
                >
                <van-button
                  plain
                  color="red"
                  @click.stop="cancelClick(item)"
                  size="small"
                  >取消咨询</van-button
                >
              </div>
            </div>
          </div>
          <div class="null-box" v-else>
            <img src="@/assets/images/null.png" alt="" />
            <p>空空如也</p>
          </div>
        </van-pull-refresh>
      </van-tab>
      <van-tab title="正在查阅"
        ><van-divider class="line"
          >(下拉刷新，建议在WIFI环境下调阅以节省流量)</van-divider
        >
        <van-pull-refresh v-model="isLoading2" @refresh="onRefresh2">
          <div class="list" v-if="todoList2 && todoList2.length > 0">
            <div class="child" v-for="(item, index) in todoList2" :key="index">
              <div class="left" @click="toImgDetail(item)">
                <p class="num">{{ index + 1 }}</p>
                <div class="date">
                  <p>
                    用户姓名:
                    <span style="margin-left: 0.12rem">{{
                      item.patientName
                    }}</span>
                  </p>
                  <p>
                    订单日期:
                    <span style="margin-left: 0.12rem">{{
                      item.orderTime
                    }}</span>
                  </p>
                  <p>
                    咨询医生：
                    <span>{{ item.doctorName }}</span>
                  </p>
                  <p>
                    咨询状态：
                    <span>{{
                      item.orderStatus == 1
                        ? "等待医生确认"
                        : item.orderStatus == 2
                        ? "医生正在查阅中"
                        : item.orderStatus == 3
                        ? "医生已取消"
                        : item.orderStatus == 4
                        ? "医生查阅完成"
                        : item.orderStatus == 5
                        ? "待评价"
                        : item.orderStatus == 6
                        ? "已评价"
                        : item.orderStatus == 7
                        ? "用户已取消"
                        : ""
                    }}</span>
                  </p>
                </div>
              </div>
              <div class="btn-group">
                <van-button
                  plain
                  type="info"
                  @click.stop="toImgDetail(item)"
                  color="#4775d9"
                  size="small"
                  >影像详情</van-button
                >
              </div>
            </div>
          </div>
          <div class="null-box" v-else>
            <img src="@/assets/images/null.png" alt="" />
            <p>空空如也</p>
          </div>
        </van-pull-refresh>
      </van-tab>
      <van-tab title="查阅完成"
        ><van-divider class="line"
          >(下拉刷新，建议在WIFI环境下调阅以节省流量)</van-divider
        >
        <van-pull-refresh v-model="isLoading3" @refresh="onRefresh3">
          <div class="list" v-if="todoList3 && todoList3.length > 0">
            <div class="child" v-for="(item, index) in todoList3" :key="index">
              <div class="left" @click="toImgDetail(item)">
                <p class="num">{{ index + 1 }}</p>
                <div class="date">
                  <p>
                    用户姓名:
                    <span style="margin-left: 0.12rem">{{
                      item.patientName
                    }}</span>
                  </p>
                  <p>
                    订单日期:
                    <span style="margin-left: 0.12rem">{{
                      item.orderTime
                    }}</span>
                  </p>
                  <p>
                    咨询医生：
                    <span>{{ item.doctorName }}</span>
                  </p>
                  <p>
                    咨询状态：
                    <span>{{
                      item.orderStatus == 1
                        ? "等待医生确认"
                        : item.orderStatus == 2
                        ? "医生正在查阅中"
                        : item.orderStatus == 3
                        ? "医生已取消"
                        : item.orderStatus == 4
                        ? "医生查阅完成"
                        : item.orderStatus == 5
                        ? "待评价"
                        : item.orderStatus == 6
                        ? "已评价"
                        : item.orderStatus == 7
                        ? "用户已取消"
                        : ""
                    }}</span>
                  </p>
                </div>
              </div>
              <div class="btn-group">
                <van-button
                  plain
                  type="info"
                  @click.stop="toImgDetail(item)"
                  color="#4775d9"
                  size="small"
                  >影像详情</van-button
                >
                <van-badge :content="item.messageStatus == 1 ? '1' : null">
                  <van-button
                    @click.stop="toReport(item)"
                    plain
                    type="primary"
                    size="small"
                    >查看报告</van-button
                  >
                </van-badge>
                <van-button
                  @click.stop="toEvaluate(item)"
                  v-show="item.orderStatus == 4"
                  plain
                  type="warning"
                  size="small"
                  >进行评价</van-button
                >
              </div>
            </div>
          </div>
          <div class="null-box" v-else>
            <img src="@/assets/images/null.png" alt="" />
            <p>空空如也</p>
          </div>
        </van-pull-refresh>
      </van-tab>
    </van-tabs>
    <van-dialog
      v-model="cancelShow"
      @confirm="cancelConfirm"
      @cancel="cancelCancel"
      title="取消理由"
      show-cancel-button
    >
      <van-field
        v-model="cancelMessage"
        rows="2"
        autosize
        type="textarea"
        maxlength="100"
        placeholder="请输入取消理由（必填）"
        show-word-limit
      /> </van-dialog
    ><van-popup
      v-model="qxshow"
      closeable
      position="bottom"
      :style="{ height: '40%' }"
    >
      <div class="d-reason">
        <p>医生取消原因如下：</p>
        <p>{{ doctorCancelReason }}</p>
      </div>
    </van-popup>
    <div style="height: 0.15rem"></div>
  </div>
</template>

<script>
import navbar from "@/components/navbar";
import { Toast, Dialog } from "vant";
import { mapGetters } from "vuex";
import { getUserOrder, setOrderStatus, getPatientOrder } from "@/api/doctor";
export default {
  name: "consultation",
  data() {
    return {
      isLoading: false,
      isLoading1: false,
      isLoading2: false,
      isLoading3: false,
      userList: null,
      cancelShow: false,
      cancelMessage: "",
      nowItem: null,
      active: 0,
      qxshow: false,
      doctorCancelReason: "",
    };
  },

  components: { navbar },

  computed: {
    ...mapGetters(["userData", "backStatus"]),
    todoList: function () {
      return (
        this.userList &&
        this.userList.filter(function (item) {
          return item.orderStatus == 1;
        })
      );
    },
    todoList2: function () {
      return (
        this.userList &&
        this.userList.filter(function (item) {
          return item.orderStatus == 2;
        })
      );
    },
    todoList3: function () {
      return (
        this.userList &&
        this.userList.filter(function (item) {
          return item.orderStatus == 4 || item.orderStatus == 6;
        })
      );
    },
  },

  created() {
    this.userDatas = JSON.parse(this.userData);
    this.getList();
    // let actives = this.$route.params.actives || 0;
    // this.active = actives;
    if (this.backStatus) {
      this.active = this.backStatus;
    }
  },
  mounted() {},

  methods: {
    //获取订单
    getList() {
      const toast = Toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: "加载中",
      });
      let data = {
        name: this.userDatas.userName,
      };
      getUserOrder(data).then((res) => {
        if (res.data.status == 200) {
          this.userList = res.data.info;
          Toast.clear();
        } else {
          Toast.fail(res.data.msg);
        }
      });
    },
    //刷新
    onRefresh() {
      this.getList();
      setTimeout(() => {
        this.isLoading = false;
      }, 800);
    },
    onRefresh1() {
      this.getList();
      setTimeout(() => {
        this.isLoading1 = false;
      }, 800);
    },
    onRefresh2() {
      this.getList();
      setTimeout(() => {
        this.isLoading2 = false;
      }, 800);
    },
    onRefresh3() {
      this.getList();
      setTimeout(() => {
        this.isLoading3 = false;
      }, 800);
    },
    onClick(name, title) {
      this.getList();
    },
    onChange(name, title) {
      this.getList();
    },
    // 影像详情
    toImgDetail(item) {
      this.$router.push({
        name: "imgDetail",
        params: { dsid: item.dsId, orderId: item.orderId, lungid: item.status },
      });
      this.$store.commit("list/SET_BACK_STATUS", this.active);
    },
    // 报告
    toReport(item) {
      this.$router.push({
        name: "doctorReport",
        params: { orderId: item.orderId },
      });
      this.$store.commit("list/SET_BACK_STATUS", this.active);
    },
    // 评价
    toEvaluate(item) {
      this.$router.push({
        name: "evaluate",
        params: {
          doctorId: item.doctorId,
          dsId: item.dsId,
          orderId: item.orderId,
        },
      });
      this.$store.commit("list/SET_BACK_STATUS", this.active);
    },
    // 取消
    cancelClick(item) {
      this.cancelShow = true;
      this.nowItem = item;
    },
    // 取消理由
    cancelConfirm() {
      if (this.cancelMessage.length == 0) {
        Toast.fail("请输入取消理由");
        setTimeout(() => {
          Toast.clear();
          this.cancelShow = true;
        }, 500);
      } else {
        let data = {
          dsId: this.nowItem.dsId,
          orderId: this.nowItem.orderId,
          status: 7,
          patientReason: this.cancelMessage,
        };
        setOrderStatus(data).then((res) => {
          if (res.data.status == 200) {
            Toast.success("取消成功");
            this.cancelShow = false;
            this.cancelMessage = "";
            this.getList();
          } else {
            Toast.fail("取消失败");
          }
        });
      }
    },
    //
    cancelCancel() {
      this.cancelMessage = "";
    },
    // 取消理由
    reasonClick(item) {
      this.qxshow = true;
      this.doctorCancelReason = item.doctorReason || "暂无填写原因";
    },
    // 返回上一页
    goBack() {
      this.$router.replace({ path: "/readList" });
      this.$store.commit("list/SET_BACK_STATUS", null);
    },
  },
};
</script>
<style lang='scss' scoped>
@import "../../assets/css/utils";
.container {
  position: relative;
  height: 100%;
  background: #f5f5f5;
  & .list {
    width: 94%;
    margin: 0 auto;
    padding-bottom: 0.45rem;
    margin-top: 0.1rem;
    & .child {
      position: relative;
      background: #f8fdff;
      padding: 0.15rem 0.15rem;
      border-radius: 8px;
      box-shadow: 4px 4px 10px #e0e0e0;
      margin-bottom: 15px;
      & .left {
        display: flex;
        align-items: center;
        margin-left: 0.1rem;
        & .num {
          font-size: 14px;
          color: #4973d7;
        }
        & .date {
          text-align: left;
          margin-left: 0.2rem;
          & p {
            font-size: 0.14rem;
            color: #999898;
            margin: 10px 0;
          }
          & span {
            font-size: 0.14rem;
            color: black;
          }
        }
      }
      & .van-button {
        // display: block;
        // margin-top: 5px;
        margin-left: 0.1rem;
      }
    }
  }
}
.btn-group {
  // position: absolute;
  text-align: right;
  display: inline-block;
  // right: 0.15rem;
  // bottom: 0.05rem;
  width: 100%;
  padding-top: 0.1rem;
  border-top: 1px solid #eaeaea;
}
.null-box {
  margin-top: 0.2rem;
  & img {
    width: 1.2rem;
  }
  & p {
    font-size: 0.16rem;
    color: #666666;
  }
}
.line {
  margin: 0.1rem 0 0 0;
}
.d-reason {
  width: 90%;
  margin: auto;
  margin-top: 0.5rem;
  & p {
    text-align: left;
  }
  & p:nth-of-type(1) {
    font-size: 0.18rem;
    color: red;
  }
  & p:nth-of-type(2) {
    text-indent: 0.2rem;
    margin-top: 0.15rem;
    font-size: 0.16rem;
    color: black;
  }
}
/deep/ .van-sticky--fixed {
  top: 0.45rem !important;
}
</style>
